<!--
 * @Descripttion: 编辑分类
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:28:24
-->
<template>
  <div class="lb-app-edit-house-classify">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main" style="margin-top: 30px">
      <el-row :gutter="25">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form
            @submit.native.prevent
            :model="classifyForm"
            :rules="classifyFormRules"
            ref="classifyForm"
            label-width="140px"
          >
            <el-form-item label="分类名称" prop="title">
              <el-input
                v-model="classifyForm.title"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择详情页样式" prop="type">
              <el-radio
                v-model="classifyForm.type"
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.id"
                @change="radioChange"
                :disabled="id ? true : false"
                >{{ item.name }}</el-radio
              >
            </el-form-item>
            <el-form-item label="分类图标" prop="img">
              <lb-cover
                :fileList="classifyForm.img"
                @selectedFiles="getImg"
              ></lb-cover>
              <lb-tool-tips>图片建议尺寸: 100 * 100</lb-tool-tips>
            </el-form-item>
            <el-form-item label="排序值" prop="top">
              <el-input-number
                class="lb-input-number"
                v-model="classifyForm.top"
                :controls="false"
                :precision="0"
                :min="0"
                placeholder="请输入排序值"
              ></el-input-number>
              <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
            </el-form-item>
            <el-form-item>
              <lb-button
                type="primary"
                @click="submitFormInfo('classifyForm')"
                >{{ $t('action.submit') }}</lb-button
              >
              <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="preview-effect">
            <!-- <div class="title">预览效果</div> -->
            <div class="img-box">
              <img
                class="houser-nav"
                src="../../../assets/house/house_nav.jpg"
              />
              <div class="house-center">
                <img
                  class="house-center-img"
                  src="../../../assets/house/house1.jpg"
                  v-if="classifyForm.type === 0"
                />
                <img
                  class="house-center-img"
                  src="../../../assets/house/house2.jpg"
                  v-if="classifyForm.type === 1"
                />
                <img
                  class="house-center-img"
                  src="../../../assets/house/house3.jpg"
                  v-if="classifyForm.type === 2"
                />
              </div>
              <img
                class="house-bottom"
                src="../../../assets/house/house_bottom1.jpg"
                v-if="classifyForm.type === 0"
              />
              <img
                class="house-bottom"
                src="../../../assets/house/house_bottom2.jpg"
                v-if="classifyForm.type === 1"
              />
              <img
                class="house-bottom"
                src="../../../assets/house/house_bottom3.jpg"
                v-if="classifyForm.type === 2"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: 0,
      navTitle: '',
      typeOptions: [
        {
          id: 0,
          name: '二手房样式'
        },
        {
          id: 1,
          name: '简洁样式'
        },
        {
          id: 2,
          name: '新房样式'
        }
      ],
      classifyForm: {
        title: '',
        type: 0,
        img: [],
        top: ''
      },
      classifyFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入分类名片',
          trigger: 'blur'
        },
        type: {
          required: true,
          type: 'number',
          message: '请选择类型',
          trigger: 'change'
        },
        img: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        }
      }
    }
  },
  created () {
    let { id } = this.$route.query
    if (id) {
      this.id = id
      this.getFormInfo(id)
    }
    this.navTitle = id
      ? `${this.$t('menu.EditHouseClassify')}`
      : `${this.$t('menu.AddHouseClassify')}`
  },
  methods: {
    getFormInfo (id) {
      this.$api.getEditHouseClassify({ id }).then(res => {
        if (res.code === 200) {
          let { img, title, top, type } = res.data
          img = [{ url: img }]
          this.classifyForm = { id, img, title, type, top }
        }
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.classifyForm))
          subForm.img = this.classifyForm.img.map(item => {
            return item.url
          })
          if (!this.id) {
            this.$api.addHouseClassify(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.getEditHouseClassify(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },
    getImg (img) {
      this.classifyForm.img = img
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-edit-house-classify {
  width: 100%;
  .page-main {
    width: 100%;
    .el-form {
      width: 500px;
    }
    .el-input,
    .lb-input-number {
      width: 300px;
    }
    .preview-effect {
      .img-box {
        width: 283px;
        height: 549px;
        margin: 0 auto;
        overflow: auto;
        border-radius: 10px;
        box-shadow: 0 1px 10px rgba(21, 13, 13, 0.5);
        img {
          width: 100%;
          height: auto;
          display: block;
        }
        .house-center {
          width: 100%;
          height: 463px;
          overflow: auto;
          background: green;
        }
      }
    }
  }
}
</style>
